<template>
  <div class="user">
    <!-- 个人中心 -->
    <div class="container">
      <!-- 头部信息 -->
      <div class="header">
        <div class="head_top">
          <div class="iconfont" @click.self="(obj.signout = !obj.signout)">&#xe8b7;</div>
          <div class="icon">
            <div class="iconfont fir">&#xe60f;</div>
            <div class="iconfont">&#xe600;</div>
          </div>
        </div>
        <div class="signout" v-show="obj.signout" @click="login">
          <span>
            退出登录
          </span>
          <div class="iconfont">
            &#xe623;
          </div>
        </div>
        <div class="head_con">
          <div class="img">
            <img
              src="https://cp1.douguo.com/upload/photo/6/f/c/6f9edfbb6fc9cb513c7defd8c87e560c.jpeg"
              alt="">
          </div>
          <div class="outher">
            <div class="info">
              <div class="name">AABC</div>
              <div class="medal">1枚</div>
              <em>LV.1</em>
            </div>
            <div class="exp">补全资料+500经验值</div>
          </div>
        </div>
        <div class="head_bot">
          <ul>
            <li>厨娘</li>
            <li>豆龄 0.1岁</li>
            <li>IP属地 广东</li>
          </ul>
          <p>吃货不是在吃就是在去吃的路上，没时间写签名</p>
        </div>
      </div>
      <!-- 导航 -->
      <div class="nav">
        <ul>
          <li @click="follow">
            <h5>{{ obj.len }}</h5>
            <span>关注</span>
          </li>
          <li>
            <h5>0</h5>
            <span>粉丝</span>
          </li>
          <li>
            <h5>0</h5>
            <span>被收藏</span>
          </li>
          <li>
            <h5>0</h5>
            <span>被学做</span>
          </li>
          <li>
            <h5>30</h5>
            <span>经验值</span>
          </li>
        </ul>
      </div>
      <!-- vip -->
      <div class="column">
        <div class="vip">
          <div class="img">
            <img src="../assets/img_gu/Pf.png" alt="" />
          </div>
          <div class="txt">
            <h2>尊享VIP卡</h2>
            <span>科学饮食轻松带你瘦</span>
          </div>
        </div>
        <div class="sign">
          <div class="img">
            <img src="../assets/img_gu/7Y.png" alt="" />
          </div>
          <div class="txt">
            <h2>签到领钱</h2>
            <span>做任务赢现金</span>
          </div>
        </div>
      </div>
      <!-- 子导航 -->
      <div class="subnav">
        <ul>
          <li>
            <div class="iconfont font">&#xe625;</div>
            <span>创作者中心</span>
          </li>
          <li>
            <div class="iconfont font">&#xe726;</div>
            <span>草稿箱</span>
          </li>
          <li>
            <div class="iconfont font">&#xe619;</div>
            <span>vip专享</span>
          </li>
          <li>
            <div class="iconfont font">&#xebb7;</div>
            <span>厨具管理</span>
          </li>
          <li>
            <div class="iconfont font">&#xe681;</div>
            <span>最近浏览</span>
          </li>
          <li>
            <div class="iconfont font">&#xe60e;</div>
            <span>采购清单</span>
          </li>
          <li>
            <div class="iconfont font">&#xe686;</div>
            <span>课程·电子书</span>
          </li>
          <li>
            <div class="iconfont font">&#xe6b1;</div>
            <span>钱包</span>
          </li>
          <li>
            <div class="iconfont font">&#xe8c0;</div>
            <span>优惠券</span>
          </li>
          <li @click="order">
            <div class="iconfont font">&#xe897;</div>
            <span>订单</span>
          </li>
        </ul>
      </div>

      <van-tabs v-model="active" color="#FFB906" line-width="20">
        <van-tab title="菜谱">
          <p class="bac" v-show="!obj.show">要发布点内容才能配得上我吃货的名声</p>
          <ul id="listImg" v-show="obj.show">
            <li @click="about">

              <img :src="obj.wite.src" alt="">

              <span>{{ obj.wite.tit }}</span>
            </li>
          </ul>
        </van-tab>
        <van-tab title="笔记">
          <van-calendar :poppable="false" :show-confirm="false" :style="{ height: '500px' }" color="#FFB906" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import "../assets/font_gu/iconfont.js";
import { useRouter } from 'vue-router';
import { useStore } from "../store/index";
import { reactive } from '@vue/runtime-core'
export default {
  setup() {
    let router = useRouter();
    let store = useStore();
    let obj = reactive({
      len: 0,
      wite: store.wite,
      show: false,
      signout:false
    })
    obj.len = store.follow.length;

    function follow() {
      router.push({
        path: "/follow",
      })
    }

    let order=()=>{
      router.push({
        path:"/shopOrder"
      })
    }

    // return{
    //   follow,
    //   obj,
    //   order
    function about() {
      router.push({
        path: '/about',
        query: {
          id: 0
        }
      })
    }
    function login() {
      router.push({
        path: '/login'
      })
      
    }
    if (store.wite.tit != '') {
      obj.show = true
    }
    return {
      follow,
      obj,
      about,
      login
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 20px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .header {
    position: relative;
    padding: 0 16px;
    .signout{
      position: absolute;
      top: 27px;
      left: 12px;
      background-color: #ccc;
      display: flex;
      align-items: center;
      padding: 4px 7px;
      border-radius: 7px;
      &>.iconfont{
        font-size: 14px;
      }
      &>span{
        font-size: 14px;
      }
      &::before{
        content: "";
        width: 0px;
        height: 0px;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-bottom: 5px solid #ccc;
        position: absolute;
        top:-4px;
        left: 8px;
      }
    }
    .head_top {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      .icon {
        display: flex;
      }
    }
  }

  .icon {
    .fir {
      padding-right: 10px;
    }
  }

  .head_con {
    display: flex;
    margin-top: 20px;

    .img {
      // flex: 1;
      // padding: 3px 0;
      width: 60px;
      height: 60px;
      background-color: aqua;
      border-radius: 50%;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: block;
      }
    }

    .outher {
      flex: 4;
      padding: 0 0 0 8px;

      .info {
        display: flex;
        width: 100%;
        margin-bottom: 6px;
        align-items: center;

        .name {
          font-size: 14px;
          color: #0f0f0f;
          min-width: 50px;
        }

        .medal {
          padding-right: 5px;
          background-color: #ffe195;
          font-size: 10px;
          border-radius: 9px;
          margin-left: 8px;
          overflow: hidden;

          &::before {
            content: "";
            width: 25px;
            height: 25px;
            vertical-align: middle;
            display: inline-block;
            background: url('../assets/img_gu/2u.png') no-repeat;
            background-size: 100%;
            background-position: 0px -7px;
            margin-right: 3px;
          }
        }

        em {
          color: #fec83a;
          font-size: 12px;
          margin-left: 5px;
        }
      }

      .exp {
        background-color: #ffc533;
        font-size: 14px;
        font-weight: 600;
        color: #333;
        padding: 5px 0;
        text-align: center;
        border-radius: 13px;
      }
    }
  }

  .head_bot {
    margin-top: 18px;

    ul {
      display: flex;

      li {
        color: #0f0f0f;
        padding-right: 10px;
        font-size: 12px;
        font-weight: 600;
      }
    }

    p {
      font-size: 12px;
      color: #494949;
    }
  }

  .nav {
    padding: 18px 12px 0 12px;
    margin-bottom: 12px;

    ul {
      display: flex;

      li {
        width: 20%;

        h5 {
          text-align: center;
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 9px;
        }

        span {
          display: block;
          text-align: center;
          color: #7e7e7e;
          font-size: 12px;
        }
      }
    }
  }

  .column {
    display: flex;
    background-color: #3d3d3d;
    margin: 0 16px;
    border-radius: 8px;
    align-items: center;
    padding: 4px 0;

    .vip {
      flex: 1;
      display: flex;
      padding-left: 9px;
      align-items: center;
    }

    .sign {
      padding-left: 9px;
      display: flex;
      flex: 1;
      position: relative;
      align-items: center;

      &::before {
        content: "";
        width: 0px;
        height: 18px;
        border-left: 1px solid #c1ad78;
        position: absolute;
        top: 8px;
        left: 0px;
      }
    }

    .img {
      padding: 0px 6px;

      img {
        display: block;
        width: 30px;
        height: 30px;
      }
    }

    .txt {
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      h2 {
        font-size: 13px;
        color: #fee192;
      }

      span {
        font-size: 8px;
        color: #fff;
      }
    }
  }

  .subnav {
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 5px 16px;

      li {
        width: 20%;
        padding-top: 16px;

        .font {
          font-size: 22px;
          text-align: center;
          padding-bottom: 10px;
        }

        span {
          display: block;
          text-align: center;
          font-size: 12px;
          color: #969696;
        }
      }
    }
  }

  .bac {
    color: #989898;
    font-size: 13px;
    text-align: center;
  }

  #listImg {

    &>li {
      &>img {
        width: 100%;
        display: block;
      }

      &>span {
        padding: 16px;
        font-size: 14px;
        display: block;
      }
    }
  }

  .van-tabs ::v-deep .van-tabs__wrap {
    margin-bottom: 15px;
  }

  .van-calendar ::v-deep .van-calendar__header-title {
    display: none;
  }
}
</style>